<template>
  <div class="app-container">
    <el-row>
      <el-col :span="6">
        <el-card shadow="always">
          <div style="text-align:left">账户余额（元）</div>
          <div class="count">
            <h2>{{balanceInfo&&balanceInfo.memberBalanceAmount | filterPriceFormat }}</h2>
          </div>
          <div class="btn">
            <el-button size="mini" type="primary" @click="onRecharge">充值</el-button>
            <el-button size="mini" type="danger" @click="onRefund">退款</el-button>
          </div>
        </el-card>
      </el-col>
      <el-col :span="24" class="mt20">
        <el-radio-group size="small" v-model="mode">
          <el-radio-button label="settlement">结算记录</el-radio-button>
          <el-radio-button label="recharge">充值记录</el-radio-button>
        </el-radio-group>
      </el-col>
    </el-row>
    <Recharge ref="chargeRefs" v-if="mode == 'recharge'" />
    <Settlement ref="settlementRefs" v-if="mode == 'settlement'" />
    <el-dialog title="充值/退款" :visible.sync="visible">
      <el-form :mode="form" label-position="left">
        <div>
          请先阅读并理解
          <el-link
            type="primary"
            :underline="false"
            @click="onViewAgree('lifeServiceAgreement')"
          >《六鸽生活服务商家协议》</el-link>
        </div>
        <el-form-item label="支付渠道" prop="channel">
          <el-checkbox-group v-model="form.channel" disabled>
            <el-checkbox name="微信" label="WECHAT">微信</el-checkbox>
            <el-checkbox name="支付宝" label="ALIPAY">支付宝</el-checkbox>
            <el-checkbox name="银行转账" label="BANK">银行转账</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="支付方式" prop="payMethod">
          <el-input style="width: 300px" type="textarea" readonly v-model="form.payMethod"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="visible = false">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog :title="articleTitle" :visible.sync="agreeVisible" width="600px">
      <span v-html="articleContent"></span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="agreeVisible = false">取 消</el-button>
        <el-button type="primary" @click="agreeVisible = false">我已阅读并同意</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Recharge from "./components/recharge.vue";
import Settlement from "./components/settlement.vue";
import { apiArticleGetByType } from "@/api/article";
import {
  apiMemberBalanceGetMemberBalance
} from "@/api/statements.js";

export default {
  components: { Settlement, Recharge },
  data() {
    return {
      exportLoading: false,
      agreeVisible: false,
      visible: false,
      articleContent: "",
      articleTitle: "",
      mode: "settlement",
      form: {
        channel: ["WECHAT", "ALIPAY", "BANK"],
        payMethod: "暂未开启线上充值渠道,请联系客服进行充值"
      },
     
      balanceInfo: null
    };
  },
  mounted() {
    this.getBalance();
  },
  methods: {
    onRefundSubmit() {},
    onRechargeSubmit() {},
    onRecharge() {
      this.visible = true;
    },
    getBalance() {
      apiMemberBalanceGetMemberBalance({
        dataType: "MERCHANT"
      }).then(res => {
        this.balanceInfo = res.data;
      });
    },
    onRefund() {
      this.visible = true;
    },
    onViewAgree(articleType) {
      apiArticleGetByType({ articleType }).then(res => {
        if (res.code == "SUCCESS") {
          this.agreeVisible = true;
          this.articleTitle = res.data[articleType].articleTitle;
          this.articleContent = res.data[articleType].articleDetails;
        }
      });
    },
    onSubmit({ values }) {
      if (values.hasOwnProperty("time")) {
        values = {
          ...values,
          auditTimeBegin: values.time ? values.time[0] : "",
          auditTimeEnd: values.time ? values.time[1] : ""
        };
        delete values.time;
      }
      this.queryParams = values;
    },
    onClear() {
      this.queryParams = {
        takeOrders: ""
      };
    },

  }
};
</script>
